<template>
  <div id="normal-preview-video">
    <base-modal-video
      :title="info.name || title"
      :info="info"
      :show.sync="visible"
      :width="VideoWidth"
      class="batch-editing-customer-dialog"
      :isDownload="!!info.downloadUrl && isHaveFileDownloadAuth"
      @Download="Download"
    >
      <template slot="information">
        <div v-if="isSize" class="infor">{{ info.fileSize }}</div>
      </template>
      <div class="preview-video-box">
        <!-- 有的数据没有类型，默认显示video -->
        <template v-if="visible">
        <audio
            ref="video"
            v-if="info.fileType === 'audio'"
            class="preview-audio"
            controls="controls"
            :controlslist="controlslist"
          >
          <source :src="url" >
            {{$t('common.base.notSupportAudio')}}
          </audio>
          <video
            ref="video"
            v-else-if="info.fileType === 'video' || !info.fileType"
            class="preview-video"
            controls="controls"
            :controlslist="controlslist"
            autoplay="autoplay"
          >
            <source :src="url" type="video/mp4">
            {{$t('common.base.notSupportVideo')}}
          </video>
        </template>
      </div>
    </base-modal-video>
    <a
      ref="downloadLink"
      download=""
      v-if="info.downloadUrl"
      :href="info.downloadUrl"
    ></a>
  </div>
</template>

<script>
import { typeOf } from "@src/util/assist";
export default {
  props: {
    url: {
      type: String,
    },
    info: {
      typeof: Object,
      default: () => {},
    },
  },
  data() {
    return {
      visible: true,
      VideoWidth: "400px",
      isSize: true,
    };
  },
  methods: {
    Download() {
      this.$nextTick(() => {
        this.$refs.downloadLink.click();
      });
    },
  },
  mounted() {
    this.$refs.video.addEventListener("loadedmetadata", (event) => {
      if (typeof event.target.videoWidth === "number") {
        let videoWidth =
          Number(event.target.videoWidth) < 560 ? 560 : event.target.videoWidth;
        this.isSize = videoWidth < 740 ? false : true;
        this.VideoWidth = videoWidth / 2 + "px";
      }
    });
  },
  computed: {
    /**是否有下载文件的权限 */
    isHaveFileDownloadAuth() {
      return this.info?.fileDownloadAuth ?? true;
    },
    title() {
      let titles = { video: this.$t('common.base.previewVideo'), audio: this.$t('common.base.previewAudio') };

      return titles[this.info.fileType] ? titles[this.info.fileType] : "";
    },
    controlslist() {
      return (!this.isHaveFileDownloadAuth || !this.info?.downloadUrl) ? 'nodownload' : ''
    },
  },
};
</script>
<style lang="scss" scoped>
.preview-video-box {
  width: 100%;
  .preview-video {
    width: 100%;
    min-height: 50px;
    max-height: 80vh;
    background: #000000;
    object-fit: cover;
  }
  .preview-audio {
    width: 100%;
    padding: 10px;
  }
}
.infor {
  font-size: 14px;
  color: #8f8f8f;
  display: inline-flex;
  align-items: flex-end;
  padding-left: 15px;
}
</style>
